<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>router_3_7-命名视图</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

  
        <div id="app">
            <h1>你好呀，命名视图!</h1>

            <router-link to="/">回到首页</router-link> <br />
            <router-link to="/about">去关于页</router-link> <br />
            <router-link to="/user">去用户中心</router-link> <br />

            <router-view class="view main-content"></router-view>

        </div>
        <script>

            const Home = { template: '<div>欢迎来到首页</div>' }
            const About = { template: '<div>欢迎来到关于页</div>' }

            //用户中心
            const User = {
                //视图的默认名为：default
                template: `
            <div>欢迎来到用户中心</div>
            <h3>↓↓↓</h3>
            <router-view />
            <router-view name="u_avtor" />
            <router-view name="u_email" />
            <h3>↑↑↑↑</h3>
            <router-link to="/user/data">您的资料</router-link> <br />
            <router-link to="/user/seting">设置</router-link><br />
            `,
            }

            //用户中心 - 资料
            const User_data = {
                template: `
            您的资料在这里哦
            `,
            }

            //用户中心 - 设置 - 头像
            const User_avtor = { template: `修改您的头像<br />`, }

            //用户中心 - 设置 - 邮箱
            const User_email = { template: `修改您的邮箱<br />`, }

            const routes = [
                { path: '/', component: Home },
                { path: '/about', component: About },

                {
                    path: '/user',//用户中心路由
                    component: User,
                    children: [
                        //用户中心 - 资料
                        {
                            path: 'data',
                            component: User_data,
                        },

                        //用户中心 - 设置
                        {
                            path: 'seting',
                            components: {
                                u_avtor: User_avtor,
                                u_email: User_email,
                            },

                        },
                    ],
                },
            ]

            const router = VueRouter.createRouter({
                // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
                history: VueRouter.createWebHashHistory(),
                routes,
            })

            // 5. 创建并挂载根实例
            const app = Vue.createApp({})
            //确保 _use_ 路由实例使
            //整个应用支持路由。
            app.use(router)

            app.mount('#app')

// 现在，应用已经启动了！
        </script>
    </body>

</html>